<template>
  <div>
      <div class="hedw">
          <span @click="fun()" class="iconfont icon-jiantou_xiangzuo_o"></span>
          <span>注册账号</span>
      </div>
      <h2 class="hw2">注册账号</h2>
      <div class="mid">
          <p><input type="text" class="oi" placeholder="请输入手机号"><span class="ol">获取验证码</span></p>
          <p><input type="text" class="oi" placeholder="请输入验证码"></p>
          <p><input type="text" class="oi" placeholder="请输入新密码(最少8位,数字+字母)"></p>
          <p class="l_p"><input type="checkbox" class="tui-checkbox"><b>为保障你的个人隐私权益,请在点击同意按钮前认真阅读下方协议：《<span>贝壳隐私政策</span>》及《<span>贝壳用户服务协议</span>》</b></p>
      </div>
      <div class="but"><button>注册</button></div>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.hedw{
    width: 90%;
    height: .45rem;
    margin: auto;
    /* background: orangered; */
}
.hedw span{
    font-size: .2rem;
    font-weight: bold;
    text-align: center;
    line-height: .45rem;
}
.hedw span:nth-child(2){
    margin-left: 1.28rem;
}
.hw2{
    width: 87%;
    height: .55rem;
    margin: auto;
    line-height: .55rem;
    /* background: pink; */
    font-size: .2rem;
}
.mid{
    width: 87%;
    height: 2.6rem;
    margin: auto;
    /* background: powderblue; */
}
.mid p{
    width: 100%;
    height: .60rem;
    border-bottom: .02rem solid #c4c4c4;
}
.mid .oi{
    width: 2.4rem;
    height: 97%;
    border: none;
    outline: none;
    background-color: #ffffff;
}
.mid p .ol{
    color: #c4c4c4;
    float: right;
    font-size: .16rem;
    line-height: .6rem;
}
.mid .l_p{
    font-size: .12rem;
    padding-top: .18rem;
    border-bottom: none;
}

.mid .l_p b{
    display: inline-block;
    margin-left: .06rem;
    width: 3.25rem;
    height: 100%;
    color: #999999;
}
.mid .l_p b span{
    color: #0354f4;
}
.but{
    width: 87%;
    height: .5rem;
    margin: auto;

}
.but button{
    width: 100%;
    height: 100%;
    background: #83aafa;
    color: white;
    border-radius: .08rem;
    border: none;
}
.tui-checkbox:checked {
	background:#1673ff
}
.tui-checkbox {
	width:.18rem;
	height:.18rem;
	background-color:#ffffff;
	border:solid .01rem #dddddd;
	-webkit-border-radius:50%;
	border-radius:50%;
	font-size:0.4rem;
	margin:0;
	padding:0;
	position:relative;
	display:inline-block;
	vertical-align:top;
	cursor:default;
	-webkit-appearance:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-transition:background-color ease 0.1s;
	transition:background-color ease 0.1s;
}
.tui-checkbox:checked::after {
	content:'';
	top:.04rem;
	left:.03rem;
	position:absolute;
	background:transparent;
	border:#fff solid .02rem;
	border-top:none;
	border-right:none;
	height:.04rem;
	width:.08rem;
	transform:rotate(-45deg);
}
</style>
